<template>
	<view class="forumHome" style="background-color: ;">
		<u-skeleton rows="15" :loading="loading" :title="false"  :rowsWidth="[530,560,690,360,480,690,670,560,690,560,680,490,530,600,680]" :rowsHeight="[35,40,120,35,40,120,35,40,120,60,76,65,100,85,80]">
			<view class="searchBar" :style="{height: searchHeight+'px'}">
				<u-search class="search" :style="{top: searchBarTop + 'px'}" :height="60" :width="60" input-align="center"
						  placeholder="请输入关键字" v-model="keyWords" :showAction="true" actionText="搜索" :clearabled="true"
						 :focus="false"
						 ></u-search>
			</view>
			
			<scroll-view scroll-x="true" class="header">
				<view class="forumNav">
					<div v-for="(item) in navList" :key="item.id" ref="articleGuide" 
					 :id="[item.id == chosenId?'chosenGuide':'']"  class="active"
					 @click="tabArticleKind(item.id)"
					 @tabtap="tabArticleKind(item.id)">
						{{item.kind}}
					</div>
				</view>
			</scroll-view>
			
			<view id="swiperControl" :style="{height: swiperHeight+'px'}">
				<swiper style="position: relative;overflow: hidden;" duration="500" easing-function="easeOutCubic" circular
						:style="{height: swiperHeight + 'px'}" :current=chosenId @change="tabFrame">
					<swiper-item v-for="(item, index) in showNow" :key="index">
						<scroll-view scroll-y class="articleList" :style="{height: swiperHeight + 'px'}" show-scrollbar=false>
							<template v-if="item.length > 0">
								<!--下面的view是每一篇文章的引导图-->
								<!--
									这里后面要加入一个<navigator url="data.articlePath">, 跳转到所选文章的详细浏览页，需要传入参数，需要优化，此处待定
								-->
									<view class="everArticle" v-for="(data, index1) in item" :key="index1" @click="open(item.id)">
										<view class="articleBaseInfo">
											<div>{{data.title}}</div>
											<view class="authorInfo">
												<div v-if="data.authorIsVip" class="vipLogo t-icon t-icon-VIP" style="transform: rotate(60deg);"></div>
												<view class="authorHead">
													<image :src="data.headPic" alt="authorHead">
												</view>
												<text class="authorName">{{data.author}}</text>
											</view>
											
											<view class="articleIntro">
												<div class="introduce">
													{{data.intro}}
												</div>
												<div class="articlePicBox">
													<image :src="data.articlePic" alt="cover">
												</div>
											</view>
											
											<view class="interactionInfo"> <!--文章互动信息，包括点赞量、阅读量、收藏量 &nbsp;是空格-->
												<text>点赞{{data.interactionInfo.good}}&nbsp;&nbsp;  评论{{data.interactionInfo.comment}}&nbsp;&nbsp;  收藏{{data.interactionInfo.star}}</text>
												<div class="tag"
													 v-for="(t,index2) in data.tags" :key="index2">
													{{t}}
												</div>
											</view>
											
										</view>
									</view>
								
							</template>
							
							<template v-if="item.length == 0">
								<text>暂无文章数据</text>
							</template>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</u-skeleton>
	</view>
</template>

<script>
	export default{
		props:{
			screenHeight:{
				type: Number,
				default:{},
				required: true
			}
		},
		data(){
			return {
				loading: false,
				userId: 0,
				userIsVip: false,
				navList:[
					{
						id:0,
						kind:"关注"
					},
					{
						id:1,
						kind:"推荐",
					},
					{
						id:2,
						kind:"校园"
					},
					{
						id:3,
						kind:"专业相关"
					},
					{
						id:4,
						kind:"唠嗑灌水"
					}
				],
				chosenId:0,
				swiperHeight: this.screenHeight * 0.81, 
				searchBarTop: this.screenHeight * 0.02,
				token:undefined,
				keyWords:'',
				searchHeight: this.screenHeight * 0.1,
				//tabId: 0,
				// showInfo: [[{},{}],[{},{}],...]  //二维数组，其中每个数组是对象数组，每个对象存储对应类别页下的文章信息
				showNow:[
					[	//关注文章的数据
						{
							articleId:0,
							authorIsVip: false,
							title: "标题1",
							author: "test1",
							headPic: require("../../static/image/teamLogo.png"),
							articlePic: require("../../static/image/teamLogo.png"),
							intro: "测试文本1",
							time: "",
							interactionInfo:{
								good: 2,
								comment: 3,
								star: 5,
							},
							tags: [
								"Java",
								"后端",
							],
							good: 0,
							comments: 0,
							detailsData:[ //文章具体内容
								"我是文章具体内容"
							],
							articlePath: "", //
						},
						{
							articleId:1,
							authorIsVip: true,
							title: "标题1",
							author: "test2",
							headPic: require("../../static/image/teamLogo.png"),
							articlePic: require("../../static/image/teamLogo.png"),
							intro: "简介",
							time: "",
							interactionInfo:{
								good: 2,
								comment: 3,
								star: 5,
							},
							tags: [
								"Java",
								"后端",
							],
							good: 0,
							comments: 0,
							detailsData:[
								"测试文本"
							],
							articlePath: "",
						},
						{
							articleId:0,
							authorIsVip: false,
							title: "标题1",
							author: "test1",
							headPic: require("../../static/image/teamLogo.png"),
							articlePic: require("../../static/image/teamLogo.png"),
							intro: "测试文本1",
							time: "",
							interactionInfo:{
								good: 2,
								comment: 3,
								star: 5,
							},
							tags: [
								"Java",
								"后端",
							],
							good: 0,
							comments: 0,
							detailsData:[ //文章具体内容
								"我是文章具体内容"
							],
							articlePath: "",
						},
						{
							articleId:1,
							authorIsVip: true,
							title: "标题1",
							author: "test2",
							headPic: require("../../static/image/teamLogo.png"),
							articlePic: require("../../static/image/teamLogo.png"),
							intro: "简介",
							time: "",
							interactionInfo:{
								good: 2,
								comment: 3,
								star: 5,
							},
							tags: [
								"Java",
								"后端",
							],
							good: 0,
							comments: 0,
							detailsData:[
								"测试文本"
							],
							articlePath: "",
						},
						{
							articleId:0,
							authorIsVip: false,
							title: "标题1",
							author: "test1",
							headPic: require("../../static/image/teamLogo.png"),
							articlePic: require("../../static/image/teamLogo.png"),
							intro: "测试文本1",
							time: "",
							interactionInfo:{
								good: 2,
								comment: 3,
								star: 5,
							},
							tags: [
								"Java",
								"后端",
							],
							good: 0,
							comments: 0,
							detailsData:[ //文章具体内容
								"我是文章具体内容"
							],
							articlePath: "",
						},
						{
							articleId:1,
							authorIsVip: true,
							title: "标题1",
							author: "test2",
							headPic: require("../../static/image/teamLogo.png"),
							articlePic: require("../../static/image/teamLogo.png"),
							intro: "简介",
							time: "",
							interactionInfo:{
								good: 2,
								comment: 3,
								star: 5,
							},
							tags: [
								"Java",
								"后端",
							],
							good: 0,
							comments: 0,
							detailsData:[
								"测试文本"
							],
							articlePath: "",
						},
					],
					[	//推荐文章的数据
						{
							articleId:0,
							authorIsVip: false,
							title: "标题1",
							author: "test1",
							headPic: require("../../static/image/teamLogo.png"),
							articlePic: require("../../static/image/teamLogo.png"),
							intro: "简介",
							time: "",
							interactionInfo:{
								good: 2,
								comment: 3,
								star: 5,
							},
							tags: [
								"css",
								"前端",
							],
							good: 0,
							comments: 0,
							detailsData:[ //文章具体内容
								"我是文章具体内容"
							],
							articlePath: "",
						},
						{
							articleId:1,
							authorIsVip: false,
							title: "标题1",
							author: "test2",
							headPic: require("../../static/image/teamLogo.png"),
							articlePic: require("../../static/image/teamLogo.png"),
							intro: "简介",
							time: "",
							interactionInfo:{
								good: 2,
								comment: 3,
								star: 5,
							},
							tags: [
								"Java",
								"后端",
							],
							good: 0,
							comments: 0,
							detailsData:[
								"测试文本"
							],
							articlePath: "",
						},
					],
					[	//校园文章的数据
						{
							articleId:0,
							authorIsVip: false,
							title: "标题1",
							author: "test1",
							headPic: require("../../static/image/teamLogo.png"),
							articlePic: require("../../static/image/teamLogo.png"),
							intro: "简介",
							time: "",
							interactionInfo:{
								good: 2,
								comment: 3,
								star: 5,
							},
							tags: [
								"食堂",
								"手抖",
							],
							good: 0,
							comments: 0,
							detailsData:[ //文章具体内容
								"我是文章具体内容"
							],
							articlePath: "",
						},
						{
							articleId:1,
							authorIsVip: false,
							title: "标题1",
							author: "test2",
							headPic: require("../../static/image/teamLogo.png"),
							articlePic: require("../../static/image/teamLogo.png"),
							intro: "简介",
							time: "",
							interactionInfo:{
								good: 2,
								comment: 3,
								star: 5,
							},
							tags: [
								"图书馆",
								"假期",
							],
							good: 0,
							comments: 0,
							detailsData:[
								"测试文本"
							],
							articlePath: "",
						},
					],
					[	//专业文章的数据
						{
							articleId:0,
							authorIsVip: false,
							title: "标题1",
							author: "test1",
							headPic: require("../../static/image/teamLogo.png"),
							articlePic: require("../../static/image/teamLogo.png"),
							intro: "简介",
							time: "",
							interactionInfo:{
								good: 2,
								comment: 3,
								star: 5,
							},
							tags: [
								"Java",
								"后端",
							],
							good: 0,
							comments: 0,
							detailsData:[ //文章具体内容
								"我是文章具体内容"
							],
							articlePath: "",
						},
						{
							articleId:1,
							authorIsVip: false,
							title: "标题1",
							author: "test2",
							headPic: require("../../static/image/teamLogo.png"),
							articlePic: require("../../static/image/teamLogo.png"),
							intro: "简介",
							time: "",
							interactionInfo:{
								good: 2,
								comment: 3,
								star: 5,
							},
							tags: [
								"Java",
								"后端",
							],
							good: 0,
							comments: 0,
							detailsData:[
								"测试文本"
							],
							articlePath: "",
						},
					],
					[	//灌水文章的数据
						{
							articleId:0,
							authorIsVip: false,
							author: "test1",
							title: "标题1",
							headPic: require("../../static/image/teamLogo.png"),
							articlePic: require("../../static/image/teamLogo.png"),
							intro: "简介",
							time: "",
							interactionInfo:{
								good: 2,
								comment: 3,
								star: 5,
							},
							tags: [
								"鼠鼠我啊",
								"水经验",
							],
							good: 0,
							comments: 0,
							detailsData:[ //文章具体内容
								"我是文章具体内容"
							],
							articlePath: "",
						},
						{
							articleId:1,
							authorIsVip: false,
							title: "标题1",
							author: "test2",
							headPic: require("../../static/image/teamLogo.png"),
							articlePic: require("../../static/image/teamLogo.png"),
							intro: "简介",
							time: "",
							interactionInfo:{
								good: 2,
								comment: 3,
								star: 5,
							},
							tags: [
								"Java",
								"后端",
							],
							good: 0,
							comments: 0,
							detailsData:[
								"测试文本"
							],
							articlePath: "",
						},
					],
				]
			}
		},
		methods:{
			tabArticleKind(theIndex){
				this.chosenId = theIndex;
			},
			tabFrame(e){
				this.chosenId = e.detail.current;
			},
			open(id){
				uni.navigateTo({
					url:'/pages/components/articleDetails?id='+id
				})
			}
		},
		onLoad() {
			this.tabArticleKind(0);
			// uni.getSystemInfo({
			// 	success:(res) => { //这里要使用 => 函数才能让swiperHeight拿到值
			// 		this.swiperHeight = res.windowHeight - uni.upx2px(200);
			// 	}
			// });
			// //获取论坛文章信息
			// uni.request({
			// 	method:'GET',
			// 	url:"",
			// 	header: this.token,
			// 	data:{
					
			// 	},
			// }).then(res => {
			// 	console.log(res) 
			// 	if(res.data.code == 200){
			// 		for(let i = 0; i < 5; i++){
			// 			this.showNow[i] = res.data.data[i]
			// 		}
			// 	}
				
			   
			//    this.loading = false
			// })
		},
		onLoad(){
		},
		onPullDownRefresh() {
			uni.request({
				method:'GET',
				url:"",
				token:this.$store.state.loginUser.token,
				data:{
					
				}
			}).then(res => {
				
			})
		}
	}
</script>

<style scoped>
	.searchBar{
		position: relative;
		width: 100%;
		background-color: ghostwhite;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	::v-deep .search{
		position: relative;
		margin: 0 auto;
	}
	.header{ 
		position: relative;
	}
	.forumNav{
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: 0 auto;
	}
	.forumNav>div{
		font-size: 1rem;
		color:darkgrey;
		transition: all 0.1s ease-in;
		border-bottom: 4px solid rgba(166,231,255,0);
	}
	/*
	.forumNav>div::before{
		content: '';
		width: 5px;
		bottom: 0px;
		height: 2px;
		border-radius: 20%;
		left: 20%;
		right: 20%;
		position: relative;
		background-color: deepskyblue;
		transition: all 0.3s ease-out;
	}*/
	#chosenGuide{
		color: dimgrey;
		border-bottom: 4px solid rgba(166,231,255,1);
		border-radius: 3px;
	}
	#swiperControl{
/* 		display: flex;
		flex-direction: column;
		align-items: center; */
		position: relative;
		padding-top: 0.3rem;
		overflow: hidden;
	}
	.articleBaseInfo>div{
		margin-left: 3px;
		float: left;
		width: 50%;
		font-size: 1.3rem;
		font-weight: bold;
		text-overflow: ellipsis;
	}
	.articleList{
		display: flex;
		align-items: center;
		position: relative;
		background-color: rgba(238, 238, 238, 1.0);
		overflow: hidden;
	}
	.everArticle{
		width: 96%;
		margin: 0 auto 5px;
		height: 9rem;
		background-color: white;
		border-radius: 10px;
	}
	.authorInfo{
		position: relative;
		float: right;
		top: 5%;
		height: 2rem;
		width: 6rem;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.authorHead{
		height: 1.6rem;
		width: 1.6rem;
		border-radius: 50%;
		overflow: hidden;
		border: 1px solid rgba(98, 111, 118, 1.0);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.authorHead>image{
		width: 1.4rem;
		height: 1.4rem;
	}
	.authorName{
		position: relative;
		left: 10px;
		font-size: 1rem;
		font-weight: 500;
		color: rgba(40, 41, 47, 1.0);
	}
	.articleIntro>image{
		float: right;
		width: 6rem;
		height: 6rem;
	}
	.vipLogo{
		position: absolute;
		left: 1rem;
		bottom: 1.2rem;
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.articleIntro{
		margin:0 auto;
		position: relative;
		top: 2.1rem;
		height: 5.5rem;
		width: 90%;
	}
	.articleIntro>div{
		
	}
	.articlePicBox{
		position: absolute;
		right: 0;
		height: 5rem;
		width: 35%;
		top: 0.25rem;
		display: flex;
		justify-content: center;
	}
	.articlePicBox>image{
		height: 5rem;
		width: 5rem;
	}
	.introduce{
		width: 50%;
		height: 5rem;
		position: absolute;
		left: 0.8rem;
		top: 0.25rem;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 0.9rem;
		color: rgba(88, 88, 88, 1.0);
		font-weight: 300;
	}
	.interactionInfo{
		font-size: 0.7rem;
		color: rgba(192,192,192,1);
		position: relative;
		bottom: -2.2rem;
		width: 90%;
		background-color: blueviolet;
		margin: 0 auto;
	}
	.interactionInfo>text{
		float: left;
	}
	.tag{
		float: right;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 2rem;
		background-color: rgba(	211,211,211,1);
		border-radius: 10%;
		font-size: 0.6rem;
		margin-left: 3px ;
		color: rgba(105,105,105,1);
	}
	
</style>